<style lang="stylus" rel="stylesheet/stylus">
@import '~style/mixin.styl';

.result 
  .banner-vip 
    img 
      width: 100%;
      height: 360px;
  .main 
    padding: 0px 28px 0;
    color: #333;
    .pk 
      overflow: hidden;
      padding-top: 60px;
      text-align: center;
      .pk-title 
        float: left;
        line-height: 380px;
        font-size: 46px;
        color: #ff8400;
      .pk-conten 
        float: left;
        padding: 0px 30px 20px;
        width: 248px;
        h2 
          height: 75px;
          line-height: @height;
          background-color: #8fb2d8;
          border-radius: 12px 12px 0 0;
          font-size: 30px;
          color: #fff;
        .conten 
          width: 246px;
          padding-top: 70px;
          padding-bottom: 112px;
          border-radius: 0 0 12px 12px;
          background-color: rgb(255, 255, 255);
          box-shadow: 0px 2px 16px 0px rgba(18, 117, 215, 0.16);
          color: #999999;
          h1 
            height: 84px;
            line-height: @height;
            font-size: 60px;
            span 
              font-size: 28px;
          p 
            height: 38px;
            line-height: @height;
            font-size: 24px;
      .pk-vip 
        h2 
          background-color: $mvip-color;
        .conten 
          background: url('../assets/wansheng@2x.png') no-repeat right bottom;
          background-size: 123px 103px;
          color: $mvip-color;
          p 
            color: #333;
    .form 
      position: relative;
      padding: 44px 42px;
      &__item 
        position: relative;
        overflow: hidden;
        width: 100%;
        margin-bottom: 22px;
        text-align: left;
        input 
          width: 100%;
          height: 98px;
          margin: 30px 0;
          height: 38px;
          border-radius: 12px;
          line-height: @height;
          text-indent: 30px;
          font-size: 30px;
          box-sizing: border-box;
          &::-webkit-input-placeholder 
            line-height: rem(44);
            font-size: rem(28);
            color: #909090;
      .aBtnRe 
        width: 100%;
        height: 98px;
        padding-top: 30px;
        .register-btn 
          height: 98px;
          width: 100%;
          border: none;
          text-indent: 0;
          border-radius: 12px;
          line-height: 98px;
          font-size: 34px;
          background-color: $mvip-color;
          color: #ffffff;
          &:active 
            background-color: mainColor;
          &:disabled 
            background-color: #bdbdbd;
  .showAlert 
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.5);
    .convip 
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      // width 540px
      // padding: 20px
      border-radius: 12px;
      background: #ffffff;
      img 
        width: 540px;
        height: 360px;

        
</style>
<template>
<div class="result">
  <loading v-if="!show"></loading> 
  <div v-if="show">
    <div class="banner-vip"><img src="../assets/vip_banner.jpg" alt="人民鲸鱼"></div>
    <!-- 主体区域 -->
    <div class="main ">
      <!-- PK -->
      <div class="pk">
        <div class="pk-conten">
          <h2>鲸鱼APP</h2>
          <div class="conten">
            <h1>{{old_regular}}<span>%</span></h1>
            <p>年定期利率</p>
          </div>
        </div>
        <h4 class="pk-title">PK</h4>
        <div class="pk-conten pk-vip">
          <h2>鲸鱼VIP专享</h2>
          <div class="conten">
            <h1>{{vip_regular}}<span>%</span></h1>
            <p>年定期利率</p>
          </div>
        </div>
      </div>
      <div class="form">
        <div class="form__item border-px">
          <input 
            type="tel" class="tel"
            placeholder="输入11位手机号码" 
            maxlength="13"
            v-model="tel"
          />
        </div>
        <!-- 按钮 -->
        <div class="aBtn aBtnRe" >
          <input
            type="button"
            class="firstCast register-btn"
            :value="btnValue"
            :disabled="!highlight"
            @click="isExistFun"
          />
        </div>
      </div>
    </div>
    <!-- 已注册用户 -->
    <div v-show="showAlert" class="showAlert">
      <div 
        class="convip"
        @click="showAlertFun"
      ><img src="./register_ok.png" alt="已经注册"></div>
    </div>
  </div> 
</div>
</template>

<script>
import { Trim } from "utils/utils.js";
export default {
  components: {},
  data() {
    return {
      show: false,
      tel: "",
      telVal: "",
      btnValue: "开启鲸鱼财富之旅",
      isRegister: true, // 是否已经注册
      responseing: false,
      old_regular: "",
      vip_regular: "",
      showAlert: false
    };
  },
  computed: {
    highlight() {
      let reg = /^1[3|4|5|6|7|8|9]\d{9}$/;

      let boolTel = reg.test(this.telVal);
      return boolTel;
    }
  },
  watch: {
    tel(newValue, oldValue) {
      let reg = /^[0-9]*$/;
      let kong = /\s/g;
      if (!reg.test(newValue)) this.tel = "";
      if (!reg.test(newValue) && !kong.test(newValue))
        newValue = this.telVal = "";
      newValue = newValue.replace(kong, "");
      newValue = newValue.replace(/(^\d{3})(?=\d)/g, "$1 ");
      newValue = newValue.replace(/(\d{4})(?=\d)/g, "$1 ");
      this.tel = newValue;
      this.telVal = Trim(this.tel, "g");
    }
  },
  created() {
    this.initFun();
  },
  mounted() {},
  methods: {
    initFun() {
      this.$http({
        servicename: "api.index",
        mobile: this.telVal || ""
      })
        .then(response => {
          this.show = true;
          console.log(response);
          this.old_regular = response.productList.old_regular.rate_init;
          this.vip_regular = response.productList.vip_regular.rate_init;
        })
        .catch(function(error) {
          this.show = true;
          console.log("失败了:" + error);
        });
    },

    isExistFun() {
      this.$http({
        servicename: "user.vipMobileExist",
        mobile: this.telVal || ""
      })
        .then(response => {
          console.log(response);

          if (response.register_status === "register") {
            console.log("----", this.$route.query.inviteCode);
            this.routerPush("registertwo", {
              telnum: this.telVal,
              inviteCode: this.$route.query.inviteCode
            });
          } else if (response.register_status === "login") {
            this.routerPush("login", {
              tel: this.telVal,
              inviteCode: this.$route.query.inviteCode
            });
            return;
          } else {
            // forbid
            this.showAlert = true;
            // this.$flash('您已经是鲸鱼用户')
            setTimeout(() => {
              this.showAlert = false;
            }, 2200);
          }
        })
        .catch(function(error) {
          console.log("失败了:" + error);
        });
    },

    showAlertFun() {
      this.showAlert = !this.showAlert;
    }
  }
};
</script>
